<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../../src/css/layui.css">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<body>


  <div style="padding: 15px; ">
    <form class="layui-form" action="" lay-filter="example">


      <div class="layui-form-item">
        <label class="layui-form-label">安检公司</label>
        <div class="layui-input-block" id="record_company">
        </div>
      </div>

      <div class="layui-form-item">

        <label class="layui-form-label">时间范围</label>
        <div class="layui-input-block">
          <input type="radio" name="date_type" value="week" title="周" checked="">
          <input type="radio" name="date_type" value="month" title="月">
          <input type="radio" name="date_type" value="quarter" title="季度">
          <input type="radio" name="date_type" value="半年" title="半年">
          <input type="radio" name="date_type" value="年" title="年">
        </div>
      </div>
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
          <div class="layui-form-item">
            <label class="layui-form-label" style="width: 150px;">每月打卡天数</label>
            <div class="layui-input-block">
              <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input"
                id="number" style="width: 150px;" value="15">

            </div>
          </div>

        </div>
        <div class="layui-col-md6">
          <div class="layui-form-item">

            <button type="submit" class="layui-btn" lay-submit="" lay-filter="search"
              style="float:right;margin-right: 50px;">查看结果</button>
          </div>

        </div>
      </div>

      <div style="padding: 20px;">
        <div id="container1" style="height:400px;"></div>
      </div>

    </form>
  </div>

  <!-- <link rel="stylesheet" href="../../src/css/layui.css"> -->
  <script src="../../src/layui.js" charset="utf-8"></script>
  <script src="....//src/setter.js?v=0513"></script>
  <script src="../../pages/js/jquery.min.js"></script>
  <script src="../../pages/js/echarts.min.js"></script>
  <script src="../../pages/js/theme/westeros.js"></script>
  <script src="../../pages/js/theme/macarons.js"></script>
  <script src="../../pages/js/theme/purple-passion.js"></script>
  <script src="../../pages/js/theme/dark.js"></script>
  <script>
    layui.use(['table', 'element', 'form', 'laydate'], function () {
      var form = layui.form;
      var $ = layui.jquery;

      var company_all = [];
      $.ajax({
        url: '../json/company.json',
        dataType: 'json',
        async: true,
        type: 'get',
        success: function (result) {
          console.log(result);

          var data = result.data;
          company_all = data;
          var company = [];
          var line = [];
          for (var i = 0; i < data.length; i++) {
            company.push(data[i].name);
          }
          loadCompany(company);

        },
        error: function (data) {
          console.log(data);
        }
      });

      //加载线体
      function loadCompany(company) {
        var _html = '';

        //全选
        _html += '<input type="checkbox" name="like10[company]" title="全选" lay-skin="primary" checked="" lay-filter="all_company" class="select_company" id="all_company">';
        for (var i = 0; i < company.length; i++) {
          _html += '<input type="checkbox" name="like1[' + company[i] + ']" title="' + company[i];
          _html += '" lay-skin="primary" checked="" class="company" lay-filter="filter_company" > ';
        }
        $('#record_company').html(_html);
        form.render();
      }

      load();
      //监听提交
      form.on('submit(search)', function (data) {
        // layer.alert(JSON.stringify(data.field), {
        //   title: '最终的提交信息'
        // })

        //获取每月打卡天数
        var number = $('#number').val();
        
        //获取选择的时间范围

      
        return false;
      });

      //监听全选
      form.on('checkbox(all_company)', function (data) {
        //全选
        if (data.elem.checked) {
          // selectAllLine();
          $('.company').prop("checked", true);
          form.render();
        } else {
          //全不选
          $('.company').prop("checked", false);
          form.render();
        }
      });

      //监听单选
      form.on('checkbox(filter_company)', function (data) {
        if (data.elem.checked) {
          //判断是否是全选
          if ($("input:checkbox[class='company']:checked").length == company_all.length) {
            //全选按钮启用
            $('#all_company').prop('checked', true);

          }
        } else {
          //全选按钮
          $('#all_company').prop('checked', false);

        }
        form.render();
      });


      //获取图表数据
      function getChart() {

      }


      //渲染图表
      function load() {
        var dom1 = document.getElementById("container1");
        var myChart1 = echarts.init(dom1, "dark");


        option1 = {
          tooltip: {
            trigger: 'item',
            formatter: '{c}%'　　　　//这是关键，在需要的地方加上就行了
          },
          xAxis: {
            type: 'category',
            data: ['中安保', '中军军弘', '京诚京安', '恒安卫士', '鑫安儆卫', '国都金盾', '央务恒远', '都杰']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [90, 86, 43, 100, 89, 92, 75, 30],
            type: 'bar',

            label: {
              show: true, // 开启显示
              rotate: 0, // 旋转70度
              position: 'top', // 在上方显示
              distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
              verticalAlign: 'middle',
              formatter: '{c}%',
              textStyle: { // 数值样式
                fontSize: 12
              }
            }

          }]
        };


        if (option1 && typeof option1 === "object") {
          myChart1.setOption(option1, true);
        }
      }
    });



  </script>

</body>

</html>